<template>
  <div :class="classes">
    <div :class="checkerboardWrapClasses">
      <div :class="checkerboardClasses"></div>
    </div>
    <div :class="gradientClasses" :style="{background: gradientColor}"></div>
    <div :class="containerClasses" ref="container"
         @mousedown="handleMouseDown"
         @touchmove="handleChange"
         @touchstart="handleChange">
      <div :class="pointerClasses" :style="{left: colors.a * 100 + '%'}">
        <div :class="pickerClasses"></div>
      </div>
    </div>
  </div>
</template>
<script>
import config from '../../../../config/config.js'
// prefix
const prefixCls = config.prefix + '-color-picker'
export default {
  // 透明度
  name: 'Alpha',
  props: {
    value: Object,
    onChange: Function
  },
  data () {
    return {
      prefixCls: prefixCls
    }
  },
  computed: {
    classes () {
      return [
                    `${prefixCls}-alpha`
      ]
    },
    checkerboardWrapClasses () {
      return [
                    `${prefixCls}-alpha-checkboard-wrap`
      ]
    },
    checkerboardClasses () {
      return [
                    `${prefixCls}-alpha-checkboard`
      ]
    },
    gradientClasses () {
      return [
                    `${prefixCls}-alpha-gradient`
      ]
    },
    containerClasses () {
      return [
                    `${prefixCls}-alpha-container`
      ]
    },
    pointerClasses () {
      return [
                    `${prefixCls}-alpha-pointer`
      ]
    },
    pickerClasses () {
      return [
                    `${prefixCls}-alpha-picker`
      ]
    },
    colors () {
      return this.value
    },
    gradientColor () {
      const rgba = this.colors.rgba
      const rgbStr = [rgba.r, rgba.g, rgba.b].join(',')
      return 'linear-gradient(to right, rgba(' + rgbStr + ', 0) 0%, rgba(' + rgbStr + ', 1) 100%)'
    }
  },
  methods: {
    handleChange (e, skip) {
      !skip && e.preventDefault()
      const container = this.$refs.container
      const containerWidth = container.clientWidth

      const xOffset = container.getBoundingClientRect().left + window.pageXOffset
      const pageX = e.pageX || (e.touches ? e.touches[0].pageX : 0)
      const left = pageX - xOffset

      let a
      if (left < 0) {
        a = 0
      } else if (left > containerWidth) {
        a = 1
      } else {
        a = Math.round(left * 100 / containerWidth) / 100
      }

      if (this.colors.a !== a) {
        this.$emit('change', {
          h: this.colors.hsl.h,
          s: this.colors.hsl.s,
          l: this.colors.hsl.l,
          a: a,
          source: 'rgba'
        })
      }
    },
    handleMouseDown (e) {
      this.handleChange(e, true)
      window.addEventListener('mousemove', this.handleChange)
      window.addEventListener('mouseup', this.handleMouseUp)
    },
    handleMouseUp () {
      this.unbindEventListeners()
    },
    unbindEventListeners () {
      window.removeEventListener('mousemove', this.handleChange)
      window.removeEventListener('mouseup', this.handleMouseUp)
    }
  }
}
</script>
